<!--@author vidy3587@gmail.com-->

<template>
  <div class="with-banner-padding has-bottom-out">
    <div class="publish-header">
      <div class="header-container">
        <div class="header-item row">
          <div>指导单位：</div>
          <div class="col-1 header-value">东南大学校团委</div>
        </div>
        <div class="header-item row">
          <div>主办单位：</div>
          <div class="col-1 header-value">南京戏度文化科技有限公司</div>
        </div>
      </div>
    </div>
    <div class="with-repeat-bg publish-container ">
      <div class="publish-content">
        <img src="@/assets/success.png" alt="" class="success-img">
        <div class="publish-text">
          获奖结果将在<br/>
          2021年10月5日公示，<br/>
          敬请期待！
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "Resultt",
  components: {},
  data() {
    return {}
  },
  created() {
  },
  computed: {},
  methods: {}
}
</script>

<style scoped lang="scss">
$headerBgLeft: px2rem((750px - 690px)/2 + 20px);
.with-banner-padding {
  min-height: 100%;
}
.header-bg {
  width: px2rem(670px);
  height: px2rem(180px);
  margin-left: $headerBgLeft;
}

.publish-container {
  min-height: initial;
  margin-top: px2rem(-4px);
}

.publish-header {
  height: px2rem(180px);
}

.header-container {
  width: px2rem(527px);
  height: px2rem(119px);
  color: $lightFontColor;
  font-size: px2rem(30px);
  margin: 0 auto;
  transform: translateY(px2rem(86px));

  .header-value {
    color: $lightWarmColor;
  }
}

.publish-title {
  text-align: center;
  color: $lightWarmColor;
  font-size: px2rem(48px);
  line-height: px2rem(52px);
}

.top-award-item {
  display: flex;
  flex-direction: row;
  background: #1246CD;
  border-radius: px2rem(55px);
  width: px2rem(547px);
  height: px2rem(70px);
  margin-top: px2rem(38px);
}

.award-list {
  width: px2rem(547px);
  margin: 0 auto;
}

.publish-container {
  //width: px2rem(603px);
  min-height: px2rem(774px - 180px);
  padding-left: px2rem(26px);
}

.award-item {
  .col-2 {
    justify-content: flex-end;
  }

  .col-1, .col-2 {
    box-sizing: border-box;
    color: $lightFontColor;
    font-size: px2rem(24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: px2rem(70px);

    &.avatar-col {
      padding-right: px2rem(24px);
      justify-content: flex-end;

    }
  }
}

.award-avatar {
  width: px2rem(52px);
  height: px2rem(52px);
  border-radius: px2rem(5px);
  justify-content: flex-end;
}

.rank {

}

.rank1 {

}

.award-badge {
  padding-left: px2rem(13px);
  //padding-right: px2rem(17px);
  width: px2rem(110px);
  height: px2rem(70px);

  img {
    width: px2rem(110px);
  }

}

.rank1 {
  img {

    transform: translateY(px2rem(-10px));
  }
}

.excellenceAward-title {
  display: inline-block;
  width: px2rem(123px);
  height: px2rem(123px);
  color: $lightWarmColor;
  font-size: px2rem(48px);
  line-height: px2rem(70px);

}

.excellenceAward-title-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1B59E8;
  border-radius: px2rem(10px);
  width: px2rem(66px);
  height: px2rem(398px);
  margin-top: px2rem(36px);
  margin-left: px2rem(42px);
  text-align: center;
}

.excellenceAward {
  margin-top: px2rem(35px);
  width: px2rem(547px);
  height: px2rem(476px);
  background: #1246CD;
  border-radius: px2rem(10px);
  overflow: hidden;
}

.excellenceAward-list {
  margin-top: px2rem(39px);

  .award-item {
    margin-bottom: px2rem(10px);
  }
}


.success-img {
  width: px2rem(423px);
  height: px2rem(161px);
  margin: 0 auto;
}

.publish-content {
  flex-direction: column;
  padding-top: px2rem(94px);
  width: px2rem(603px);
  margin-left: px2rem(26px +28px);
  display: flex;
  justify-content:center;
}

.publish-text {
  margin-top: px2rem(24px);
  text-align: center;
  font-size: px2rem(36px);
  color: #F2E630;
  line-height: px2rem(52px);
}
</style>